<template>
  <el-dropdown @command="loadTimeRange">
    <el-button type="primary" link>
      <span>载入时段预设</span>
      <el-icon><i-ep-arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(item, index) in timeRanges"
          :command="index"
          :disabled="item.disabled"
        >
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore";
import timeRanges from "@/profiles/timeRanges.json";
import dayjs from "dayjs";

const planningStore = usePlanningStore();

const loadTimeRange = (index) => {
  const ranges = timeRanges[index].content.map((item) => ({
    taskName: item.taskName,
    startDate: dayjs().add(item.startDateOffset, "day").format("YYYY-MM-DD"),
    endDate: dayjs().add(item.endDateOffset, "day").format("YYYY-MM-DD"),
    startTime: item.startTime,
    endTime: item.endTime,
    granularity: item.granularity,
  }));
  planningStore.timeRanges = [...ranges];
};

const loadDefaultTimeRange = () => {
  loadTimeRange(0);
};

onMounted(() => {
  loadDefaultTimeRange();
});
</script>
